<template>
    <div>
        <!-- <h1>app</h1> -->

        <nav>
            <router-link to="/home ">首页</router-link>
            <router-link to="/detail">详情页</router-link>
            <router-link to="/login">登录页</router-link>
            <router-link to="/city">城市页面</router-link>
        </nav>


        <!-- 页面的url匹配到对应的path时在此处渲染对应的组件 -->
        <router-view />
    </div>
</template>

<script>
export default {
    created() {
        console.log('路由实例对象',this.$router)
    }
}
</script>

<style lang="scss" >
nav{
    display: flex;
    a{
        flex: 1;
        text-align: center;
        line-height: 40px;
    }
    .router-link-exact-active{
        background: orange;
    }
}
</style>